<template>
    <view class="content">
        <view class="class1">
            <view class="top">
                <image :src="data.image" class="img"></image>
                <view class="top-right">
                    <view class="title">{{data.title}}</view>
                    <view class="u-flex">
                        <view class="time">
                            <image src="../../static/icon/time_01.png" class="time-01"></image>
                            <view>活动时间：{{data.start_time}}-{{data.end_time}}</view>
                        </view>
                        <view></view>
                    </view>
                </view>
            </view>
            
            <view class="box">
                <view class="box-title">
                    <image src="../../static/icon/i_09.png" class="i-09"></image>
                    <view>预约信息</view>
                </view>
                <view class="item">
                    <view class="item-l">姓名</view>
                    <view class="item-r">{{data.name}}</view>
                </view>
                <view class="item">
                    <view class="item-l">性别</view>
                    <view class="item-r">{{data.gender}}</view>
                </view>
                <view class="item">
                    <view class="item-l">出生年月</view>
                    <view class="item-r">{{data.birthday}}</view>
                </view>
                <view class="item">
                    <view class="item-l">职业</view>
                    <view class="item-r">{{data.career}}</view>
                </view>
                <view class="item">
                    <view class="item-l">联系电话</view>
                    <view class="item-r">{{data.phone}}</view>
                </view>
                <view class="item">
                    <view class="item-l">微信号</view>
                    <view class="item-r">{{data.wechat}}</view>
                </view>
                <view class="item">
                    <view class="item-l">星座</view>
                    <view class="item-r">{{data.constellation}}</view>
                </view>
                <view class="item">
                    <view class="item-l">紧急联系人</view>
                    <view class="item-r">{{data.urgent_name}}</view>
                </view>
                <view class="item">
                    <view class="item-l">紧急联系电话</view>
                    <view class="item-r">{{data.urgent_phone}}</view>
                </view>
            </view>
            
            <view class="box box2">
                <view>
                    <view class="order">
                        <view class="order-l">订单编号</view>
                        <view class="order-r">{{data.out_trade_no}}</view>
                    </view>
                    <view class="order">
                        <view class="order-l">创建时间</view>
                        <view class="order-r">{{data.create_time}}</view>
                    </view>
                    <view class="order" v-if="data.order_status == 2">
                        <view class="order-l">支付时间</view>
                        <view class="order-r">{{data.pay_time}}</view>
                    </view>
                    <view class="order" v-if="data.order_status == 3">
                        <view class="order-l">核销时间</view>
                        <view class="order-r">{{data.finish_time}}</view>
                    </view>
                    <view class="order" v-if="data.order_status == 4">
                        <view class="order-l">售后时间</view>
                        <view class="order-r">{{data.finish_time}}</view>
                    </view>
                </view>
                <view class="copy" @click="copy(data.out_trade_no)">复制</view>
            </view>
            <!-- order_status 1待支付 2已支付 3已核销 4已退款 -->
            <view class="box" v-if="data.order_status == 2">
                <image :src="data.qrcode" class="qr"></image>
            </view>
            <view style="height: 100px;"></view>
        </view>
        
        <view class="footer" v-if="data.order_status == 1 || data.order_status == 2">
            <view>
                <view v-if="data.order_status == 1">
                    <view class="price">￥<text>{{data.order_amount}}</text></view>
                    <view class="yyje">预约金额</view>
                </view>
            </view>
            <view class="btn1" @click="toPay" v-if="data.order_status == 1">立即支付</view>
            <view class="btn2" @click="toAfter" v-if="data.order_status == 2">申请售后</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                data: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
        },
        methods: {
            toPay() {
                this.$gTo(`/pages/pay/pay?id=${this.data.id}&money=${this.data.order_amount}`)
            },
            
            
            // refund 1能退 2不能
            toAfter() {
                if (this.data.refund == 1) {
                    this.$gTo('/pages/order/after?id=' + this.id)
                } else {
                    this.$toast('活动开始前3小时之内不可退款');
                    return
                }
            },
            
            getData() {
                this.$ajax('activity_orders_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//订单id
                    out_trade_no: '',//核销订单号
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            //复制订单编号
            copy(order_no) {
                uni.setClipboardData({
                    data: order_no,
                    success: function() {
                        console.log('success');
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .class1 {
    	height: 400rpx;
    	width: 100%;
    	background: linear-gradient(180deg, #3dc2ef, #71deed, #f5f5f5);
        padding: 30rpx 25rpx;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .img{
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        border: 2rpx solid #e6e6e6;
        margin-right: 25rpx;
    }
    .top-right{
        flex: 1;
    }
    .title{
        font-size: 30rpx;
        font-weight: bold;
        width: 470rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 10rpx;
    }
    .time{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 7rpx 12rpx;
        background-color: #fff5ea;
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #ff8400;
    }
    .time-01{
        width: 22rpx;
        height: 22rpx;
        margin-right: 10rpx;
    }
    
    
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 30rpx 25rpx;
    }
    .box-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
    }
    .i-09{
        width: 30rpx;
        height: 27rpx;
        margin-right: 10rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
    }
    .item:last-child{
        padding-bottom: 0;
    }
    .item-l{
        color: #737373;
        width: 190rpx;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    
    .box2{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .order{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15rpx;
        font-size: 24rpx;
    }
    .order:last-child{
        padding-bottom: 0;
    }
    .order-l{
        width: 130rpx;
    }
    .order-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .copy{
        width: 90rpx;
        height: 42rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 50rpx;
        box-sizing: border-box;
        font-size: 22rpx;
        color: #4c4c4c;
        line-height: 42rpx;
        text-align: center;
        margin-left: 15rpx;
    }
    
    
    .qr{
        width: 317rpx;
        height: 317rpx;
        margin: auto;
    }
    .footer{
        width: 100vw;
        height: 105rpx;
        border-top: 2rpx solid #e6e6e6;
        background-color: #fff;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        // z-index: 1;
    }
    .price{
        font-size: 26rpx;
    }
    .price>text{
        font-size: 39rpx;
        font-weight: bold;
    }
    .yyje{
        font-size: 24rpx;
        color: #807f7f;
    }
    .btn1{
        padding: 15rpx 22rpx;
        border-radius: 50rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
        line-height: 1;
        color: #fff;
        background-color: #40bef1;
    }
    .btn2{
        padding: 15rpx 22rpx;
        border-radius: 50rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
        line-height: 1;
        border: 2rpx solid #e6e6e6;
    }
    

</style>
